import 'package:flutter/material.dart';
import '../../domain/order_item.dart';
import 'order_item_widget.dart';


/// `OrderSection` Widget 用于显示历史订单信息。
///
/// 它采用响应式的网格布局（`GridView`），可以根据可用宽度动态调整列数，
/// 从而在不同尺寸的屏幕上都能提供良好的用户体验。
/// 当前版本使用模拟数据进行演示。
class OrderSection extends StatelessWidget {
  /// `OrderSection` 的构造函数。
  const OrderSection({super.key});

  @override
  Widget build(BuildContext context) {
    // TODO: 将模拟数据替换为从 OrderNotifier 获取的真实数据。
    // 模拟订单数据，用于演示目的。
    final List<OrderItem> orders = [
      OrderItem(
          id: '240815202505159001',
          date: DateTime.now().subtract(const Duration(days: 3, hours: 2)),
          amount: 39.00,
          type: '自营订单'),
      OrderItem(
          id: '240815202505159021',
          date: DateTime.now().subtract(const Duration(days: 3, hours: 1)),
          amount: 1962.00,
          type: '京东订单'),
      OrderItem(
          id: '1240815202505159032',
          date: DateTime.now().subtract(const Duration(days: 3)),
          amount: 30.00,
          type: '饿了么订单'),
      OrderItem(
          id: '240815202505159034',
          date: DateTime.now().subtract(const Duration(days: 2, hours: 22)),
          amount: 39.00,
          type: '其他订单'),
      OrderItem(
          id: '240815202505159037',
          date: DateTime.now().subtract(const Duration(days: 2, hours: 21)),
          amount: 36.00,
          type: '美团订单'),
      OrderItem(
          id: '240815202505159040',
          date: DateTime.now().subtract(const Duration(days: 2, hours: 20)),
          amount: 33.00,
          type: '自营订单'),
    ];

    // 使用 `Column` 垂直排列标题和订单网格。
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 构建并显示标题栏。
        _buildHeader(context),
        const SizedBox(height: 10),
        // `Expanded` 使得订单网格可以填充所有可用的垂直空间。
        Expanded(
          // `LayoutBuilder` 提供父组件的约束信息，用于构建响应式布局。
          child: LayoutBuilder(
            builder: (context, constraints) {
              // 根据可用宽度动态计算网格的列数。
              int crossAxisCount = (constraints.maxWidth / 300).floor();
              if (crossAxisCount < 1) crossAxisCount = 1; // 至少保证一列。

              // 根据列数动态调整子项的宽高比，以优化显示效果。
              double childAspectRatio = 3;
              if (crossAxisCount == 1) {
                childAspectRatio = 5;
              } else if (crossAxisCount == 2) {
                childAspectRatio = 4;
              }

              // `GridView.builder` 高效地构建网格视图，只在需要时创建子项。
              return GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: crossAxisCount, // 列数
                  crossAxisSpacing: 10, // 水平间距
                  mainAxisSpacing: 10, // 垂直间距
                  childAspectRatio: childAspectRatio, // 子项宽高比
                ),
                itemCount: orders.length,
                itemBuilder: (context, index) {
                  // 为每个订单数据创建一个 `OrderItemWidget`。
                  return OrderItemWidget(item: orders[index]);
                },
              );
            },
          ),
        ),
      ],
    );
  }

    /// 构建订单区域的标题栏。
  ///
  /// 这是一个私有辅助方法，用于创建包含标题和“更多”按钮的 `Row`。
  Widget _buildHeader(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        const Text('历史订单信息', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        TextButton(onPressed: () {}, child: const Text('更多')),
      ],
    );
  }
}